<template>
  <div id="map-wrap"
       style="height: 100vh">
    <client-only>
      <l-map ref="map" :zoom="zoom"
             :center="center"
             :minZoom="minZoom"
             :maxZoom="maxZoom"
             style="width: 100%">
        <l-tile-layer :url="url"></l-tile-layer>
        <template v-for="p of footprintList">
          <l-marker :key="p._id"
                    :lat-lng="[p.latitude,p.longitude]"
                    :icon="icon">
            <l-popup>
              <h3 v-text="p.place"></h3>
              <p v-text="p.travelDate"></p>
              <p v-text="p.description"></p>
              <div v-viewer class="photos">
                <img v-for="pic of p.photos"
                     :key="pic"
                     :src="pic"
                     width="120px" />
              </div>
            </l-popup>
          </l-marker>
        </template>
      </l-map>
    </client-only>
  </div>
</template>

<script>
import L from 'leaflet'
import { LMap, LTileLayer, LMarker, LPopup } from 'vue2-leaflet'
import { post } from '@/shared/request.js'

export default {
  components: { LMap, LTileLayer, LMarker, LPopup },
  data () {
    return {
      url: 'http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}',
      zoom: 4,
      minZoom: 3,
      maxZoom: 16,
      center: [35.63452, 109.132287],
      listLoading: false,
      footprintList: [],
      icon: L.icon({
        iconUrl: './images/foot.png',
        iconSize: [28, 28],
        iconAnchor: [10, 10]
      })
    }
  },
  mounted () {
    this.getFootprints()
    setTimeout(() => {
      const query = this.$route.query
      console.log(query)
      if (query.longitude && query.latitude) {
        const point = [query.latitude, query.longitude]
        this.$refs.map.mapObject.setView(point, 8)
        // this.$refs.map.mapObject.panTo(point)
      }
    }, 200)
  },
  methods: {
    getFootprints () {
      this.listLoading = true
      post('/footprint/pageList', { page: 1, size: 9999 }).then((response) => {
        response.data.forEach((item) => {
          item.travelDate = item.travelDate && item.travelDate.length === 2 ? item.travelDate.join(' ~ ') : item.travelDate.join('')
          this.footprintList = response.data
          this.listLoading = false
        })
      })
    }
  }
}
</script>

<style>
.container {
  margin: 0 auto;
  max-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}
</style>
